<?php
require_once 'includes/dbcon.php';
if(!isset($_SESSION['application_pin']))
{
	header("location: validatepin.php") ;
}
// Generate CSRF token
$csrf_token = generate_csrf_token();

// Generate application number function
function generateApplicationNumber() {
    $prefix = 'MMGSS';
    $year = date('Y');
    $random = strtoupper(substr(uniqid(), -6));
    return $prefix . '-' . $year . '-' . $random;
}

// If this is an AJAX request
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['ajax_submit'])) {
    header('Content-Type: application/json');
    
    $response = ['success' => false, 'message' => '', 'application_no' => ''];
    
    // Validate CSRF token
    if (!validate_csrf_token($_POST['csrf_token'])) {
        $response['message'] = "Security token validation failed. Please try again.";
        echo json_encode($response);
        exit();
    }
    
    // Validate and sanitize data
    $first_name = sanitize_input($_POST['first_name']);
    $middle_name = sanitize_input($_POST['middle_name']);
    $last_name = sanitize_input($_POST['last_name']);
    $date_of_birth = $_POST['date_of_birth'];
    $present_address = sanitize_input($_POST['present_address']);
    $home_town = sanitize_input($_POST['home_town']);
    $lga = sanitize_input($_POST['lga']);
    $religion = sanitize_input($_POST['religion']);
    $email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
    $last_school = sanitize_input($_POST['last_school']);
    $last_class = sanitize_input($_POST['last_class']);
    
    // Parent/Guardian data
    $parent_name = sanitize_input($_POST['parent_name']);
    $parent_phone = sanitize_input($_POST['parent_phone']);
    $parent_occupation = sanitize_input($_POST['parent_occupation']);
    $parent_address = sanitize_input($_POST['parent_address']);
    
    // Basic validation
    if (empty($first_name) || empty($last_name)) {
        $response['message'] = "First name and last name are required.";
        echo json_encode($response);
        exit();
    }
    
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $response['message'] = "Please provide a valid email address.";
        echo json_encode($response);
        exit();
    }
    
    if (empty($date_of_birth)) {
        $response['message'] = "Date of birth is required.";
        echo json_encode($response);
        exit();
    }
    
    // Handle file upload if exists
    $passport_photo = '';
    if (isset($_FILES['passport_photo']) && $_FILES['passport_photo']['error'] === 0) {
        $allowed_types = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
        $max_size = 2 * 1024 * 1024;
        $file_type = $_FILES['passport_photo']['type'];
        $file_size = $_FILES['passport_photo']['size'];
        
        if (in_array($file_type, $allowed_types) && $file_size <= $max_size) {
            $upload_dir = 'uploads/passports/';
            if (!is_dir($upload_dir)) {
                mkdir($upload_dir, 0755, true);
            }
            
            $file_extension = pathinfo($_FILES['passport_photo']['name'], PATHINFO_EXTENSION);
            $new_filename = 'passport_' . time() . '_' . uniqid() . '.' . $file_extension;
            $upload_path = $upload_dir . $new_filename;
            
            if (move_uploaded_file($_FILES['passport_photo']['tmp_name'], $upload_path)) {
                $passport_photo = $upload_path;
            }
        }
    }
    
    try {
        $application_no = generateApplicationNumber();
        
        $stmt = $DBcon->prepare("INSERT INTO applications (
            application_no, passport_photo, first_name, middle_name, last_name,
            date_of_birth, present_address, home_town, lga, religion, email,
            last_school, last_class, parent_name, parent_phone, parent_occupation,
            parent_address
        ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)");
        
        $stmt->execute([
            $application_no,
            $passport_photo,
            $first_name,
            $middle_name,
            $last_name,
            $date_of_birth,
            $present_address,
            $home_town,
            $lga,
            $religion,
            $email,
            $last_school,
            $last_class,
            $parent_name,
            $parent_phone,
            $parent_occupation,
            $parent_address
        ]);
        
        // Send email notifications
        sendApplicationEmails($application_no, $first_name . ' ' . $last_name, $email, $parent_name);
        
        $response['success'] = true;
        $response['application_no'] = $application_no;
        $response['message'] = "Application submitted successfully!";
        
    } catch (PDOException $e) {
        error_log("Application save error: " . $e->getMessage());
        $response['message'] = "Failed to submit application. Please try again.";
    }
    
    echo json_encode($response);
    exit();
}

// Function to send email notifications
function sendApplicationEmails($app_no, $student_name, $student_email, $parent_name) {
    // School admin email
    $admin_email = "info@mmgssnnewi.org";
    $school_email = "mmgssnnewi@gmail.com";
    
    // Email to student/parent
    $to_student = $student_email;
    $subject_student = "Application Submitted Successfully - Mother of Mercy Girls Secondary School";
    
    $message_student = '
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Application Confirmation</title>
        <style>
            body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 600px; margin: 0 auto; }
            .header { background-color: #0a1a3a; color: white; padding: 20px; text-align: center; }
            .content { padding: 30px; background-color: #f9f9f9; }
            .footer { background-color: #f1f1f1; padding: 20px; text-align: center; font-size: 12px; color: #666; }
            .highlight { background-color: #e8f4fd; padding: 15px; border-left: 4px solid #0a1a3a; margin: 20px 0; }
            .app-no { font-size: 24px; font-weight: bold; color: #0a1a3a; text-align: center; margin: 20px 0; }
        </style>
    </head>
    <body>
        <div class="header">
            <h1>Mother of Mercy Girls Secondary School, Nnewi</h1>
        </div>
        <div class="content">
            <h2>Dear ' . $student_name . ',</h2>
            <p>Thank you for submitting your application to Mother of Mercy Girls Secondary School, Nnewi.</p>
            
            <div class="highlight">
                <p><strong>Application Status:</strong> Submitted Successfully</p>
                <p><strong>Date:</strong> ' . date('F d, Y') . '</p>
                <p><strong>Reference:</strong> ' . $app_no . '</p>
            </div>
            
            <div class="app-no">' . $app_no . '</div>
            
            <p>Your application has been received and is currently under review. Please keep your application number safe as you will need it for future correspondence and to check your application status.</p>
            
            <h3>Next Steps:</h3>
            <ol>
                <li>Application review (2-3 business days)</li>
                <li>Entrance examination notification</li>
                <li>Interview schedule (if applicable)</li>
                <li>Final admission decision</li>
            </ol>
            
            <p>You will be contacted via email or phone with further instructions.</p>
            
            <p><strong>For inquiries:</strong><br>
            Email: admissions@mmgss.edu.ng<br>
            Phone: +234 803 123 4567</p>
        </div>
        <div class="footer">
            <p>© ' . date('Y') . ' Mother of Mercy Girls Secondary School, Nnewi. All rights reserved.</p>
            <p>This is an automated message. Please do not reply to this email.</p>
        </div>
    </body>
    </html>';
    
    // Email to admin
    $subject_admin = "New Application Received - " . $app_no;
    $message_admin = '
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>New Application Alert</title>
        <style>
            body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
            .alert { background-color: #fff3cd; border: 1px solid #ffeaa7; padding: 15px; margin: 10px 0; }
            .info-box { background-color: #f8f9fa; padding: 15px; border: 1px solid #dee2e6; margin: 10px 0; }
        </style>
    </head>
    <body>
        <h2>New Student Application Received</h2>
        
        <div class="alert">
            <strong>Application Number:</strong> ' . $app_no . '<br>
            <strong>Received:</strong> ' . date('Y-m-d H:i:s') . '
        </div>
        
        <div class="info-box">
            <h3>Applicant Information:</h3>
            <p><strong>Student Name:</strong> ' . $student_name . '</p>
            <p><strong>Parent/Guardian:</strong> ' . $parent_name . '</p>
            <p><strong>Application Date:</strong> ' . date('F d, Y') . '</p>
        </div>
        
        <p>Please review this application in the admin portal at your earliest convenience.</p>
        
        <p><a href="http://yourdomain.com/admin/applications.php?app_no=' . $app_no . '">View Application Details</a></p>
    </body>
    </html>';
    
    // Email headers
    $headers = "MIME-Version: 1.0" . "\r\n";
    $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
    $headers .= "From: Mother of Mercy Girls SS <no-reply@mmgss.edu.ng>" . "\r\n";
    
    // Send emails
    @mail($to_student, $subject_student, $message_student, $headers);
    @mail($admin_email, $subject_admin, $message_admin, $headers);
    @mail($school_email, $subject_admin, $message_admin, $headers);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Application - Mother of Mercy Girls Secondary School Nnewi</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <style>
        :root {
            --primary-color: #0a1a3a;
            --secondary-color: #b8860b;
            --accent-color: #8b0000;
            --light-color: #f8f9fa;
            --dark-color: #343a40;
            --success-color: #28a745;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            color: var(--dark-color);
            background-color: #f5f5f5;
        }
        
        .application-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .application-header {
            text-align: center;
            margin-bottom: 40px;
            padding: 30px;
            background: linear-gradient(135deg, var(--primary-color), #1a3a5f);
            color: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .application-header h1 {
            font-family: 'Cinzel', serif;
            font-size: 2.5rem;
            margin-bottom: 10px;
        }
        
        .application-header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        .application-steps {
            display: flex;
            justify-content: center;
            margin-bottom: 40px;
            position: relative;
        }
        
        .application-steps::before {
            content: '';
            position: absolute;
            top: 25px;
            left: 10%;
            right: 10%;
            height: 3px;
            background-color: #ddd;
            z-index: 1;
        }
        
        .step {
            text-align: center;
            position: relative;
            z-index: 2;
            flex: 1;
            max-width: 200px;
        }
        
        .step-circle {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #ddd;
            color: #666;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: bold;
            margin: 0 auto 10px;
            transition: all 0.3s ease;
        }
        
        .step.active .step-circle {
            background-color: var(--secondary-color);
            color: white;
            transform: scale(1.1);
        }
        
        .step.completed .step-circle {
            background-color: var(--success-color);
            color: white;
        }
        
        .step-label {
            font-weight: 600;
            color: #666;
        }
        
        .step.active .step-label {
            color: var(--primary-color);
        }
        
        .form-container {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            padding: 40px;
            margin-bottom: 30px;
        }
        
        .form-section {
            display: none;
            animation: fadeIn 0.5s ease;
        }
        
        .form-section.active {
            display: block;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .section-title {
            font-family: 'Cinzel', serif;
            color: var(--primary-color);
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 2px solid #eee;
            font-size: 1.8rem;
        }
        
        .form-row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 25px;
        }
        
        .form-group {
            flex: 1;
            min-width: 250px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--primary-color);
        }
        
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            transition: all 0.3s ease;
            font-family: 'Inter', sans-serif;
        }
        
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.1);
        }
        
        .required::after {
            content: ' *';
            color: var(--danger-color);
        }
        
        .file-upload {
            position: relative;
            border: 2px dashed #ddd;
            border-radius: 5px;
            padding: 30px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .file-upload:hover {
            border-color: var(--secondary-color);
            background-color: rgba(184, 134, 11, 0.05);
        }
        
        .file-upload input[type="file"] {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }
        
        .file-upload i {
            font-size: 2.5rem;
            color: var(--secondary-color);
            margin-bottom: 15px;
        }
        
        .file-upload p {
            margin-bottom: 5px;
            color: #666;
        }
        
        .file-upload small {
            color: #999;
        }
        
        .preview-image {
            max-width: 150px;
            max-height: 150px;
            border-radius: 5px;
            margin-top: 15px;
            display: none;
        }
        
        .form-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }
        
        .btn {
            padding: 12px 30px;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        
        .btn-prev {
            background-color: #6c757d;
            color: white;
        }
        
        .btn-prev:hover {
            background-color: #5a6268;
        }
        
        .btn-next, .btn-submit {
            background-color: var(--primary-color);
            color: white;
        }
        
        .btn-next:hover, .btn-submit:hover {
            background-color: #1a3a5f;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .btn-submit {
            background-color: var(--success-color);
        }
        
        .btn-submit:hover {
            background-color: #218838;
        }
        
        .success-message {
            text-align: center;
            padding: 60px 40px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            animation: fadeIn 0.8s ease;
        }
        
        .success-icon {
            font-size: 4rem;
            color: var(--success-color);
            margin-bottom: 20px;
        }
        
        .application-number {
            font-size: 2rem;
            font-weight: bold;
            color: var(--primary-color);
            margin: 20px 0;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 5px;
            letter-spacing: 1px;
        }
        
        .alert {
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        
        .alert-danger {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .alert-success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        @media (max-width: 768px) {
            .application-header h1 {
                font-size: 2rem;
            }
            
            .application-steps {
                flex-direction: column;
                align-items: center;
                gap: 20px;
            }
            
            .application-steps::before {
                display: none;
            }
            
            .form-container {
                padding: 20px;
            }
            
            .form-actions {
                flex-direction: column;
                gap: 15px;
            }
            
            .btn {
                width: 100%;
            }
        }
        
        .instructions {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 5px;
            margin-bottom: 30px;
            border-left: 4px solid var(--secondary-color);
        }
        
        .instructions h4 {
            color: var(--primary-color);
            margin-bottom: 10px;
            font-family: 'Cinzel', serif;
        }
        
        .instructions ul {
            padding-left: 20px;
        }
        
        .instructions li {
            margin-bottom: 8px;
        }
        
        .error-message {
            color: var(--danger-color);
            font-size: 0.875rem;
            margin-top: 5px;
        }
        
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
        
        .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <?php include("header.php"); ?>
    <br/><br/><br/><br/>
    <div class="application-container">
        <div class="application-header">
            <h1>Online Application Portal</h1>
            <p>Complete the form below to apply for admission into Mother of Mercy Girls Secondary School, Nnewi</p>
        </div>
        
        <div class="loading-overlay" id="loadingOverlay">
            <div class="spinner"></div>
        </div>
        
        <div id="successMessage" style="display: none;"></div>
        
        <div id="formContainer">
            <div class="application-steps">
                <div class="step active" id="step1-indicator">
                    <div class="step-circle">1</div>
                    <div class="step-label">Student Information</div>
                </div>
                <div class="step" id="step2-indicator">
                    <div class="step-circle">2</div>
                    <div class="step-label">Parent/Guardian</div>
                </div>
                <div class="step" id="step3-indicator">
                    <div class="step-circle">3</div>
                    <div class="step-label">Review & Submit</div>
                </div>
            </div>
            
            <form id="applicationForm" enctype="multipart/form-data">
                <input type="hidden" name="csrf_token" value="<?php echo $csrf_token; ?>">
                <input type="hidden" name="ajax_submit" value="1">
                
                <div class="form-container">
                    <!-- Step 1: Student Information -->
                    <div class="form-section active" id="step1">
                        <h2 class="section-title">Student Information</h2>
                        
                        <div class="instructions">
                            <h4><i class="fas fa-info-circle"></i> Important Instructions</h4>
                            <ul>
                                <li>All fields marked with <span style="color: var(--danger-color);">*</span> are required</li>
                                <li>Passport photograph should be recent and clear (max 2MB)</li>
                                <li>Ensure all information is accurate and matches official documents</li>
                                <li>Use the same names as they appear on birth certificate</li>
                            </ul>
                        </div>
                        
                        <div class="form-group">
                            <label for="passport_photo">Passport Photograph (Optional)</label>
                            <div class="file-upload">
                                <i class="fas fa-cloud-upload-alt"></i>
                                <p>Click to upload passport photo</p>
                                <small>JPEG, PNG or GIF (Max 2MB)</small>
                                <input type="file" name="passport_photo" id="passport_photo" accept="image/*">
                                <img id="passportPreview" class="preview-image" src="" alt="Passport Preview">
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label for="first_name" class="required">First Name</label>
                                <input type="text" id="first_name" name="first_name" required>
                            </div>
                            <div class="form-group">
                                <label for="middle_name">Middle Name</label>
                                <input type="text" id="middle_name" name="middle_name">
                            </div>
                            <div class="form-group">
                                <label for="last_name" class="required">Last Name</label>
                                <input type="text" id="last_name" name="last_name" required>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label for="date_of_birth" class="required">Date of Birth</label>
                                <input type="date" id="date_of_birth" name="date_of_birth" required max="<?php echo date('Y-m-d'); ?>">
                            </div>
                            <div class="form-group">
                                <label for="religion" class="required">Religion</label>
                                <select id="religion" name="religion" required>
                                    <option value="">Select Religion</option>
                                    <option value="Christianity">Christianity</option>
                                    <option value="Islam">Islam</option>
                                    <option value="Traditional">Traditional</option>
                                    <option value="Others">Others</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="email" class="required">Email Address</label>
                                <input type="email" id="email" name="email" required>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="present_address" class="required">Present Address</label>
                            <textarea id="present_address" name="present_address" rows="3" required></textarea>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label for="home_town" class="required">Home Town</label>
                                <input type="text" id="home_town" name="home_town" required>
                            </div>
                            <div class="form-group">
                                <label for="lga" class="required">Local Government Area</label>
                                <input type="text" id="lga" name="lga" required>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label for="last_school" class="required">Last School Attended</label>
                                <input type="text" id="last_school" name="last_school" required>
                            </div>
                            <div class="form-group">
                                <label for="last_class" class="required">Last Class Passed</label>
                                <input type="text" id="last_class" name="last_class" required>
                            </div>
                        </div>
                        
                        <div class="form-actions">
                            <div></div>
                            <button type="button" class="btn btn-next" id="nextStep1">
                                Next <i class="fas fa-arrow-right"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- Step 2: Parent/Guardian Information -->
                    <div class="form-section" id="step2">
                        <h2 class="section-title">Parent/Guardian Information</h2>
                        
                        <div class="instructions">
                            <h4><i class="fas fa-info-circle"></i> Important Instructions</h4>
                            <ul>
                                <li>Provide accurate contact information for parent or legal guardian</li>
                                <li>Ensure phone number is active for communication</li>
                                <li>Use the same name as on official identification</li>
                            </ul>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label for="parent_name" class="required">Parent/Guardian Full Name</label>
                                <input type="text" id="parent_name" name="parent_name" required>
                            </div>
                            <div class="form-group">
                                <label for="parent_phone" class="required">Phone Number</label>
                                <input type="tel" id="parent_phone" name="parent_phone" required pattern="[0-9]{11}" placeholder="08012345678">
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label for="parent_occupation" class="required">Occupation</label>
                                <input type="text" id="parent_occupation" name="parent_occupation" required>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="parent_address" class="required">Parent/Guardian Address</label>
                            <textarea id="parent_address" name="parent_address" rows="3" required></textarea>
                        </div>
                        
                        <div class="form-actions">
                            <button type="button" class="btn btn-prev" id="prevStep2">
                                <i class="fas fa-arrow-left"></i> Previous
                            </button>
                            <button type="button" class="btn btn-next" id="nextStep2">
                                Next <i class="fas fa-arrow-right"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- Step 3: Review and Submit -->
                    <div class="form-section" id="step3">
                        <h2 class="section-title">Review & Submit Application</h2>
                        
                        <div class="instructions">
                            <h4><i class="fas fa-check-circle"></i> Please review your information carefully before submitting</h4>
                            <p>Once submitted, you cannot make changes to this application. You will receive a confirmation email with your application number.</p>
                        </div>
                        
                        <div id="reviewContent">
                            <!-- Content will be populated by JavaScript -->
                        </div>
                        
                        <div class="form-actions">
                            <button type="button" class="btn btn-prev" id="prevStep3">
                                <i class="fas fa-arrow-left"></i> Previous
                            </button>
                            <button type="button" class="btn btn-submit" id="submitApplication">
                                <i class="fas fa-paper-plane"></i> Submit Application
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    
    <?php include("footer.php"); ?>
    
    <script>
        // Form Navigation
        let currentStep = 1;
        const totalSteps = 3;
        
        // Step navigation functions
        function goToStep(step) {
            // Hide all steps
            document.querySelectorAll('.form-section').forEach(section => {
                section.classList.remove('active');
            });
            
            // Show current step
            document.getElementById(`step${step}`).classList.add('active');
            
            // Update step indicators
            document.querySelectorAll('.step').forEach((stepEl, index) => {
                stepEl.classList.remove('active', 'completed');
                if (index + 1 < step) {
                    stepEl.classList.add('completed');
                } else if (index + 1 === step) {
                    stepEl.classList.add('active');
                }
            });
            
            currentStep = step;
            
            // Populate review if on step 3
            if (step === 3) {
                populateReview();
            }
        }
        
        function nextStep() {
            if (validateCurrentStep()) {
                if (currentStep < totalSteps) {
                    goToStep(currentStep + 1);
                }
            }
        }
        
        function prevStep() {
            if (currentStep > 1) {
                goToStep(currentStep - 1);
            }
        }
        
        // Simple step validation
        function validateCurrentStep() {
            let isValid = true;
            const currentSection = document.getElementById(`step${currentStep}`);
            
            // Get all required inputs in current step
            const requiredInputs = currentSection.querySelectorAll('input[required], select[required], textarea[required]');
            
            // Clear previous errors
            currentSection.querySelectorAll('.error-message').forEach(el => el.remove());
            
            requiredInputs.forEach(input => {
                input.style.borderColor = '#ddd';
                
                if (!input.value.trim()) {
                    isValid = false;
                    input.style.borderColor = '#dc3545';
                    
                    const errorMsg = document.createElement('div');
                    errorMsg.className = 'error-message';
                    errorMsg.textContent = 'This field is required';
                    input.parentNode.appendChild(errorMsg);
                }
                
                // Email validation
                if (input.type === 'email' && input.value.trim()) {
                    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                    if (!emailRegex.test(input.value)) {
                        isValid = false;
                        input.style.borderColor = '#dc3545';
                        const errorMsg = document.createElement('div');
                        errorMsg.className = 'error-message';
                        errorMsg.textContent = 'Please enter a valid email address';
                        input.parentNode.appendChild(errorMsg);
                    }
                }
                
                // Phone validation
                if (input.id === 'parent_phone' && input.value.trim() && !/^[0-9]{11}$/.test(input.value)) {
                    isValid = false;
                    input.style.borderColor = '#dc3545';
                    const errorMsg = document.createElement('div');
                    errorMsg.className = 'error-message';
                    errorMsg.textContent = 'Please enter a valid 11-digit phone number';
                    input.parentNode.appendChild(errorMsg);
                }
            });
            
            if (!isValid) {
                // Scroll to first error
                const firstError = currentSection.querySelector('.error-message');
                if (firstError) {
                    firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }
            
            return isValid;
        }
        
        // Populate review section
        function populateReview() {
            const reviewContent = document.getElementById('reviewContent');
            
            // Gather all form data
            const formData = {
                first_name: document.getElementById('first_name').value,
                middle_name: document.getElementById('middle_name').value,
                last_name: document.getElementById('last_name').value,
                date_of_birth: document.getElementById('date_of_birth').value,
                religion: document.getElementById('religion').value,
                email: document.getElementById('email').value,
                present_address: document.getElementById('present_address').value,
                home_town: document.getElementById('home_town').value,
                lga: document.getElementById('lga').value,
                last_school: document.getElementById('last_school').value,
                last_class: document.getElementById('last_class').value,
                parent_name: document.getElementById('parent_name').value,
                parent_phone: document.getElementById('parent_phone').value,
                parent_occupation: document.getElementById('parent_occupation').value,
                parent_address: document.getElementById('parent_address').value,
                passport_file: document.getElementById('passport_photo').files[0] ? 
                    document.getElementById('passport_photo').files[0].name : 'No file selected'
            };
            
            // Format date
            const formattedDate = formData.date_of_birth ? 
                new Date(formData.date_of_birth).toLocaleDateString('en-US', { 
                    year: 'numeric', 
                    month: 'long', 
                    day: 'numeric' 
                }) : '';
            
            // Create review HTML
            reviewContent.innerHTML = `
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
                    <div>
                        <h3 style="color: var(--primary-color); margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee;">
                            <i class="fas fa-user-graduate"></i> Student Information
                        </h3>
                        <div style="background-color: #f8f9fa; padding: 20px; border-radius: 5px;">
                            <p><strong>Full Name:</strong> ${formData.first_name} ${formData.middle_name ? formData.middle_name + ' ' : ''}${formData.last_name}</p>
                            <p><strong>Date of Birth:</strong> ${formattedDate}</p>
                            <p><strong>Religion:</strong> ${formData.religion}</p>
                            <p><strong>Email:</strong> ${formData.email}</p>
                            <p><strong>Home Town:</strong> ${formData.home_town}</p>
                            <p><strong>LGA:</strong> ${formData.lga}</p>
                            <p><strong>Last School:</strong> ${formData.last_school}</p>
                            <p><strong>Last Class:</strong> ${formData.last_class}</p>
                            <p><strong>Passport Photo:</strong> ${formData.passport_file}</p>
                        </div>
                    </div>
                    
                    <div>
                        <h3 style="color: var(--primary-color); margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee;">
                            <i class="fas fa-users"></i> Parent/Guardian Information
                        </h3>
                        <div style="background-color: #f8f9fa; padding: 20px; border-radius: 5px;">
                            <p><strong>Full Name:</strong> ${formData.parent_name}</p>
                            <p><strong>Phone Number:</strong> ${formData.parent_phone}</p>
                            <p><strong>Occupation:</strong> ${formData.parent_occupation}</p>
                            <p><strong>Address:</strong> ${formData.parent_address}</p>
                        </div>
                        
                        <h3 style="color: var(--primary-color); margin: 20px 0 15px; padding-bottom: 10px; border-bottom: 1px solid #eee;">
                            <i class="fas fa-home"></i> Present Address
                        </h3>
                        <div style="background-color: #f8f9fa; padding: 20px; border-radius: 5px; margin-bottom: 20px;">
                            <p>${formData.present_address.replace(/\n/g, '<br>')}</p>
                        </div>
                    </div>
                </div>
                
                <div style="background-color: #e8f4fd; padding: 20px; border-radius: 5px; margin-top: 30px; border-left: 4px solid var(--secondary-color);">
                    <h4 style="color: var(--primary-color); margin-bottom: 10px;">
                        <i class="fas fa-exclamation-triangle"></i> Declaration
                    </h4>
                    <p>I hereby declare that the information provided in this application is true and correct to the best of my knowledge. I understand that any false information may lead to disqualification or subsequent termination of admission.</p>
                    
                    <div style="margin-top: 15px;">
                        <label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
                            <input type="checkbox" id="declaration" style="width: auto;">
                            <span>I agree to the terms and conditions stated above</span>
                        </label>
                    </div>
                </div>
            `;
        }
        
        // Passport photo preview
        document.getElementById('passport_photo').addEventListener('change', function(e) {
            const preview = document.getElementById('passportPreview');
            const file = e.target.files[0];
            
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                }
                reader.readAsDataURL(file);
            } else {
                preview.style.display = 'none';
            }
        });
        
        // Event listeners for navigation buttons
        document.getElementById('nextStep1').addEventListener('click', nextStep);
        document.getElementById('nextStep2').addEventListener('click', nextStep);
        document.getElementById('prevStep2').addEventListener('click', prevStep);
        document.getElementById('prevStep3').addEventListener('click', prevStep);
        
        // AJAX Form Submission
        document.getElementById('submitApplication').addEventListener('click', function() {
            // Check declaration
            const declaration = document.getElementById('declaration');
            if (!declaration || !declaration.checked) {
                alert('Please agree to the declaration before submitting.');
                return;
            }
            
            // Validate all steps before submitting
            let allValid = true;
            
            // Validate step 1
            goToStep(1);
            if (!validateCurrentStep()) {
                allValid = false;
            }
            
            // Validate step 2
            if (allValid) {
                goToStep(2);
                if (!validateCurrentStep()) {
                    allValid = false;
                }
            }
            
            // If validation failed, stay on the step with errors
            if (!allValid) {
                return;
            }
            
            // Go back to step 3 for submission
            goToStep(3);
            
            // Show loading overlay
            document.getElementById('loadingOverlay').style.display = 'flex';
            
            // Prepare form data
            const formData = new FormData(document.getElementById('applicationForm'));
            
            // Submit via AJAX
            fetch('', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                // Hide loading overlay
                document.getElementById('loadingOverlay').style.display = 'none';
                
                if (data.success) {
                    // Show success message
                    const successMessage = document.getElementById('successMessage');
                    successMessage.innerHTML = `
                        <div class="success-message">
                            <div class="success-icon">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <h2>Application Submitted Successfully!</h2>
                            <p>Thank you for applying to Mother of Mercy Girls Secondary School, Nnewi.</p>
                            
                            <div class="application-number">
                                ${data.application_no}
                            </div>
                            
                            <p>Your application number has been sent to your email address along with further instructions.</p>
                            <p>Please keep this application number safe for future reference.</p>
                            
                            <div style="margin-top: 30px;">
                                <a href="index.php" class="btn" style="background-color: var(--primary-color);">
                                    <i class="fas fa-home"></i> Return to Homepage
                                </a>
                                <button class="btn" onclick="window.print()" style="background-color: var(--secondary-color);">
                                    <i class="fas fa-print"></i> Print Confirmation
                                </button>
                            </div>
                        </div>
                    `;
                    successMessage.style.display = 'block';
                    
                    // Hide the form
                    document.getElementById('formContainer').style.display = 'none';
                } else {
                    alert('Error: ' + data.message);
                }
            })
            .catch(error => {
                document.getElementById('loadingOverlay').style.display = 'none';
                alert('An error occurred. Please try again.');
                console.error('Error:', error);
            });
        });
        
        // Add keyboard navigation
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA') {
                e.preventDefault();
                if (currentStep < totalSteps) {
                    nextStep();
                }
            }
        });
    </script>
</body>
</html>